<%@ tag language="java" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ attribute name="page" type="org.rujue.common.persistence.Page" required="true" description="翻页对象" %>
<%@ attribute name="showBtn" type="java.lang.Boolean" required="false" description="是否显示"%>
<%@ attribute name="selectType" type="java.lang.String" required="false" description="单选框或复选框"%>

<div id="layPage" class="layui-table-custom layui-table-column layui-table-page">
    <div class="layui-inline layui-table-pageview" id="layui-table-page1"></div>
    <c:if test="${showBtn}">
        <div class="btn-group btn-group-sm float-sm-right">
        <c:if test="${selectType eq 'checkbox'}">
            <button class="btn btn-primary" onclick="selectedCheckbox('layui-table-id1')"><i class="mi-check mr-2"></i>确定</button>
        </c:if>
        <c:if test="${selectType eq 'radio'}">
            <button class="btn btn-primary" onclick="selectedRadio('layui-table-id1')"><i class="mi-check mr-2"></i>确定</button>
        </c:if>
            <button class="btn" onclick="cancelSelect()"><i class="mi-close mr-2"></i>取消</button>
        </div>
    </c:if>
</div>
<script>
    layui.use('laypage', function(){
        let pageCount = ${page.total};
        let limits = [10, 30, 50, 100];
        if(pageCount > 100){
            limits = [10, 30, 50, 100,pageCount];
        }
        layui.laypage.render({
            elem: 'layui-table-page1',//元素ID 不要加# 并且只能是ID
            count: ${page.total},//这个是你的总页面
            curr: ${page.pageNo},//这个是你当前的页数，设置好 页面跳转后他会自动选择对应的页码、也就是第几页的背景改变颜色
            limit : ${page.pageSize},//这个是每页面显示多少条，页面跳转后他会自动让下拉框里对应的值设为选中状态
            groups: 2,
            limits: limits,
            layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
            prev: '<i class="layui-icon">&#xe603;</i>',
            next: '<i class="layui-icon">&#xe602;</i>',
            jump: function(obj, first){//这个方法是在你选择页数后触发执行，在这里完成当你点击页码后需要向服务请求数据的操作
                if (!first) {
                    page(obj.curr,obj.limit);
                }
            }
        });
    });

</script>